<template>
  <div>
    <a-modal title="Case详情" v-model="modalVisible" width="90%" @ok="closeModal" @cancel="closeModal">
      <case-info-description :caseInfo="selectCaseInfo.caseInfo" :caseStatus="caseStatus"></case-info-description>
      <a-tabs type="card" size="large">
        <a-tab-pane key="0">
          <span slot="tab"><a-icon type="file-text" />需求概要</span>
          <demand-info-description :demandInfo="selectCaseInfo.demand"></demand-info-description>
        </a-tab-pane>
        <a-tab-pane key="1">
          <span slot="tab"><a-icon type="file-markdown" />非功能需求</span>
          <non-functional-demand-description
            :nonFunctionDemand="selectCaseInfo.nonfunc"
          ></non-functional-demand-description>
        </a-tab-pane>
        <a-tab-pane v-for="(body, index) in selectCaseInfo.body" :key="index + 2">
          <span slot="tab"><a-icon type="pushpin" />交易-{{ index + 1 }}</span>
          <trans-body-description :body="body"></trans-body-description>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import CaseInfoDescription from './descriptions/CaseInfoDescription.vue'
import DemandInfoDescription from './descriptions/DemandInfoDescription.vue'
import NonFunctionalDemandDescription from './descriptions/NonFunctionalDemandDescription.vue'
import TransBodyDescription from './descriptions/TransBodyDescription.vue'
export default {
  name: 'caseInfoModal',
  components: {
    CaseInfoDescription,
    DemandInfoDescription,
    NonFunctionalDemandDescription,
    TransBodyDescription
  },
  props: {
    showModal: {
      type: Boolean
    },
    selectCaseInfo: {
      type: Object
    },
    caseStatus: {
      type: Array
    },
  },
  data() {
    return {
      modalVisible: this.showModal
    }
  },
  watch: {
    showModal(newVal) {
      this.modalVisible = newVal
    }
  },
  methods: {
    closeModal() {
      //此处调用下父组件的方法试一下
      this.$emit('close', false)
    }
  }
}
</script>

<style scoped lang="less"></style>
